<template>
  <div>
    <div class='banitem' :class="moreState?'active':''">
      <div @click="goSyllabus(item)" class='link'>
        <div class='pic'>
          <el-image class="img" :src='item.cover_url' alt=''>
            <template #error>
              <el-image class="img" :src='defaultCover' alt=''/>
            </template>
          </el-image>
          <div class='base-info' v-if="item.cla_name">
            <div class='flex-box'>
              <div class='left'>
                <i v-if='item.cla_name
' class='iconfont icon-integral-fill'></i>
                <span v-if="item.cla_name
" class="text" :title="item.cla_name
">{{ item.cla_name
 }}</span>
              </div>
              <div class="right" v-if="item.campusName">
                <span>{{ item.campusName }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class='text'>
          <div class='title'>
            <div class='left' :title="item.name">
              {{ item.name }}
            </div>
            <div class='right'>
              {{ item.create_name}}
            </div>
          </div>
          <div class='info'>
            <div class='classname' :title="item.marjor_name">{{ item.marjor_name }}</div>
            <div class='time'>  {{ parseTime(item.update_time, '{y}-{m}-{d} {h}:{i}') }}</div>
          </div>
        </div>
      </div>
<div v-if="useUserStore().rolesName=='老师组'">
      <div class='more' @click='clickMore'>
        <el-tooltip
          effect='light'
          content='更多'
          placement='left'
        >
          <span class='iconfont icon-gengduo'></span>
        </el-tooltip>
      </div>
      <div class='card' v-show='moreState'>
        <div class='list'>
          <div class='row' @click='goSyllabus(item)'>
            <svg class='coloricon' aria-hidden='true'>
              <use xlink:href='#icon-bianji'></use>
            </svg>
            <span>设计班课</span>
          </div>
          <div class='row' @click='editBanke(item.id)'>
            <svg class='coloricon' aria-hidden='true'>
              <use xlink:href='#icon-shuru'></use>
            </svg>
            <span>修改</span>
          </div>
        
          <div class='row' @click='clickClone(item.id)'>
            <svg class='coloricon' aria-hidden='true'>
              <use xlink:href='#icon-qitake'></use>
            </svg>
            <span>拷贝</span>
          </div>
  
          <div class='row' @click='clickDel(item.id)'>
            <svg class='coloricon' aria-hidden='true'>
              <use xlink:href='#icon-shanchu'></use>
            </svg>
            <span>删除</span>
          </div>
        </div>

        <!-- <div class='btm'>
          <div class='small'>邀请码：</div>
          <div class='big'>{{ item.invitationCode }}</div>
        </div> -->
      </div>
</div>


<div v-if="useUserStore().rolesName=='管理组'">
      <div class='more' @click='clickMore'>
        <el-tooltip
          effect='light'
          content='更多'
          placement='left'
        >
          <span class='iconfont icon-gengduo'></span>
        </el-tooltip>
      </div>
      <div style="padding:0; width: auto;" class='card' v-show='moreState'>
        <div class='list'>
          <div class='row' @click='goRating(item)'>
            <svg class='coloricon' aria-hidden='true'>
              <use xlink:href='#icon-bianji'></use>
            </svg>
            <span>评分</span>
          </div>   
        </div>

        <!-- <div class='btm'>
          <div class='small'>邀请码：</div>
          <div class='big'>{{ item.invitationCode }}</div>
        </div> -->
      </div>
</div>
      <!-- <div class="with-me" v-if="item.collaboratorNumber > 0">
        <div class="flex-box">
          <span class="label">协作</span>
          <span class="num">X{{ item.collaboratorNumber + 1 }}</span>
        </div>
      </div> -->
    </div>

    <div class='bigmask' v-show='moreState' @click='clickMask'></div>

    <BanDialog v-model:dialogVisible='dialogVisible' title='修改班课' width='1000px'>
      <template #content>
        <div class='edit'>
          <AddBanClass @addEvent='addEvent' :majorListData="majorListData" :banId="banId" :bkitem='item' @addSuccess='addSuccess'></AddBanClass>
        </div>
      </template>
    </BanDialog>


    <BanDialog
      v-model:dialogVisible='dialogVisibleRating'
      title='评分'
      width='600px'
    >
      <template #content>
        <div class='edit'>
          <el-form
            label-width='0'
            ref='RatingFormRef'
            :model='RatingForm'
            :rules='RatingRules'
            @submit.prevent
          >
            <el-form-item prop='score'>
              <el-input
                placeholder='请为访该门班课打分'
                v-model='RatingForm.score'
              />
            </el-form-item>

            <div class='btngroup'>
              <el-button @click='handleCloseRating'>取消</el-button>
              <el-button type='primary' @click='handleSaveRating'>
                确认评分
              </el-button>
            </div>
          </el-form>
        </div>
      </template>
    </BanDialog>


    <el-dialog
      class="withme-dialoag"
      v-model="showwWithMeRef"
      width='700px'
      :close-on-click-modal='false'
      destroy-on-close
    >
      <with-me-list :row="item"/>
    </el-dialog>
  </div>
</template>

<script setup>
import {ElMessage, ElMessageBox,ElLoading} from 'element-plus';

import {removeClass, cloneClass} from '@/api/banke/class';
import {parseTime, timeInterval} from '@/utils/common';
import BanDialog from '@/components/BanDialog.vue';
import AddBanClass from '@/components/AddBanClass.vue';
import {computed} from 'vue';
import {majorList} from "@/api/banji/classadmin.js"
import WithMeList from "@/components/BanListItem/WithMeList.vue";
import defaultCover from '@/assets/images/nopic2.jpg'
import dayjs from "dayjs";
import counterStore from "@/store/modules/counter"
import useUserStore from '@/store/modules/user'
import { saveRating } from '@/api/banke/admin';
import {copyToBk } from "@/api/library.js"
const { proxy } = getCurrentInstance();
defineOptions({
  name: 'BanListItemForTeach'
})
const dialogVisibleRating = ref(false);
const store=counterStore()
const banId=ref(null)
const router = useRouter();
const emits = defineEmits(['addSuccess','rateSuccess']);
const moreState = ref(false);
const dialogVisible = ref(false);
const showwWithMeRef = ref(false)
const majorListData=ref([])
//评分班课
const RatingForm = ref({
  id: null,
  score: null,
});


//评分验证规则
const regrating = (rule, value, callback) => {
  //数字只能是>=0的数
  //const regMoney = /^(?:[1-9][0-9]*\.[0-9]+|0\.(?!0+$)[0-9]+)$/;
  const regMoney = /^(\.*)(\d+)(\.?)(\d{0,2}).*$/;

  if (!regMoney.test(value)) {
    callback(new Error('评分不能小于0'));
  } else if(value > 100) {
    callback(new Error('评分应在100分以内'));
  }else if(isNaN(value)) {
    callback(new Error('格式错误'));
  } else {
    callback();
  }
};
const RatingRules = ref({
  score: [
    { required: true, message: '请输入分数', trigger: 'change' },
    { validator: regrating, trigger: 'blur' },
  ],
});

const props = defineProps({
  item: {
    type: Object,
    default: () => ({}),
  },
  orderby: {
    type: String,
    default: 'updateTime',
  },
});



const formatCreateItemDate = computed(()=> {
  const {createTime} = unref(props.item)
  if (!createTime) return ''
  return dayjs(+createTime).format('YYYY-MM-DD HH:mm')
})

const formatUpdateItemDate = computed(()=> {
  const {updateTime} = unref(props.item)
  if (!updateTime) return ''
  return dayjs(+updateTime).format('YYYY-MM-DD HH:mm')
})

const updateDateFormatGet = computed(() => {
  const updateTime = props.item.updateTime;
  if ((Date.now() - updateTime) > 30 * 24 * 60 * 60 * 1000) return `更新于${parseTime(updateTime, '{y}-{m}-{d}')}`;
  else return `更新于${timeInterval(updateTime)}`;
});

const clickWithMe = () => {
  showwWithMeRef.value = true
}
//点击更多
const clickMore = () => {
  moreState.value = !moreState.value;
};

//点击弹出层
const clickMask = () => {
  moreState.value = !moreState.value;
};

//点击修改班课
const editBanke = (id) => {
  majorData()
  moreState.value = !moreState.value;
  banId.value=Number(id)
  dialogVisible.value = true;
};

//点击设计班课
const goSyllabus = (item) => {
  store.bkItem=item
  console.log(store.bkItem);
  store.excellentClass=false
  router.push({path:'/designclass',query:{activeNum:1}})
};

//点击复制班课
const clickClone = (id) => { 
  const loading = ElLoading.service({
      lock: true,
      text: '拷贝中,请稍等',
      background: 'rgba(255, 255, 255 0.7)',
    })
    copyToBk(id).then(res => {
      console.log(res);
      if(typeof res === 'number'){
        ElMessage.success("拷贝成功")
        emits('rateSuccess');
        loading.close()
      }else{
        ElMessage.error("拷贝失败")
        emits('rateSuccess');
        loading.close()
      }
    })

};

//点击删除班课
const clickDel = (e) => {
  moreState.value = !moreState.value;
  ElMessageBox.confirm('是否确认删除', '警告', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    removeClass(e).then(res => {
      console.log(res);
      
      if (!res) {
        ElMessage.success('成功删除一门班课');
        emits('addSuccess'); 
      }else{
        ElMessage.error(res.response.data);
      }
    
    });
  }).catch(err => {
    console.log(err);
  });
};

//修改成功的返回
const addSuccess = () => {
  emits('addSuccess');
};

// 子组件点击取消返回的事件
const addEvent = () => {
  dialogVisible.value = false
};
// 专业列表
const majorData=()=>{
    majorList().then(res=>{
        majorListData.value=res
    })
}

//评分
const goRating = (item) => {  
  RatingForm.value.id = item.id;
  RatingForm.value.score = item.score;
  moreState.value = !moreState.value;
  dialogVisibleRating.value = true;
};

const handleCloseRating = () => {
  dialogVisibleRating.value = false;
};

const handleSaveRating = () => {
  proxy.$refs.RatingFormRef.validate((valid) => {
    if (valid) {
      RatingForm.value.id=Number(RatingForm.value.id)
      RatingForm.value.score=Number(RatingForm.value.score)
      console.log(RatingForm.value.score);
      saveRating(RatingForm.value).then(res => {
        if (!res) {
          ElMessage.success('评分成功！');
          dialogVisibleRating.value = false;
          emits('rateSuccess');
        } else {
          ElMessage.error(res.response.data);

          dialogVisibleRating.value = true;
        }
      })
        .catch(err => {

          ElMessage.error(err);
        });


    } else {
      dialogVisibleRating.value = true;
    }
  });
};



</script>

<style lang='scss' scoped>
@use '@/assets/styles/custom' as *;

@font-face {
  font-family: YouSheBiaoTiHei;
  src: url("@/assets/fonts/YouSheBiaoTiHei.woff2");
}

.banitem {
  position: relative;
  width: 100%;
  min-height: 200px;
  z-index: 21;
cursor: pointer;
  .with-me {
    position: absolute;
    left: 0;
    top: 0;
    height: 24px;
    padding: 0 16px 0 8px;
    background-color: rgba(255, 102, 0, 1);
    border-radius: 5px 0 50px 0;

    .flex-box {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;

      .label {
        margin-right: 4px;
        font-size: 14px;
        color: rgba(255, 255, 255, 1);
        font-family: YouSheBiaoTiHei, serif;
      }

      .num {
        font-size: 12px;
        color: rgba(255, 255, 255, 1);
      }
    }
  }

  .link {
    display: block;
  }

  .pic {
    position: relative;
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
    background-color: #000;

    .img {
      width: 100%;
      height: 140px;
      transition: 0.3s;
      display: block;
    }

    .base-info {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      padding: 4px 0 2px;
      transition: opacity ease 0.3s;
      background: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
      border-radius: 0 0 6px 6px;
      box-sizing: border-box;
      opacity: 1;

      .flex-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: calc(100% - 12px);
        margin: 0 auto;


        > .left {
          max-width: 50%;
          font-size: 12px;
          color: #fff;
          @include text-line-hidden();
        }

        > .right {
          max-width: 48%;
          height: 22px;
          padding: 0 4px;
          font-size: 12px;
          color: #fff;
          line-height: 22px;
          @include text-line-hidden();
          background-color: rgba(0, 0, 0, .5);
          border-radius: 3px;
          box-sizing: border-box;
        }
      }
    }
  }

  .text {
    width: 100%;
    height: 70px;
    padding: 6px;

    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding-top: 4px;
      padding-bottom: 6px;
      font-size: 15px;
      color: #333;

      .left {
        flex: 1;
        font-weight: 600;
        padding-right: 10px;
        @include text-line-hidden();
      }

      .right {
        flex-shrink: 0;
        margin-left: 5px;
        font-size: 12px;
        text-align: right;
      }
    }

    .info {
      display: flex;
      justify-content: space-between;
      font-size: 13px;
      color: #aaa;

      .classname {
        width: 50%;
        @include text-line-hidden();
      }

      .time {
        width: 50%;
        text-align: right;
        overflow: hidden;
      }
    }
  }

  .more {
    position: absolute;
    right: 15px;
    top: 12px;
    cursor: pointer;
    opacity: 0;
    transition: 0.3s;

    .iconfont {
      font-size: 36px;
      color: #fff;
    }
  }

  .card {
    padding: 20px 0px;
    background: #fff;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
    position: absolute;
    right: 40px;
    top: 50px;
    width: 160px;
    
    border-radius: 6px;
    z-index: 25;

    .list {
      .row {
        color: #383838;
        font-size: 14px;
        display: flex;
        padding: 7px 25px;
        align-items: center;
        cursor: pointer;

        .coloricon {
          width: 16px;
          height: 16px;
          font-size: 18px;
        }

        span {
          padding-left: 5px;
        }
      }

  
    }

    .btm {
      display: flex;
      align-items: flex-end;
      padding: 8px 10px 0;
      border-top: 1px solid #eee;
      justify-content: center;

      .small {
        font-size: 14px;
        color: #888;
      }

      .big {
        font-size: 18px;
        color: #333;
      }
    }
  }


  &.active,
  &:hover {
    z-index: 99;

    .pic {
      .img {
        opacity: 0.5;
      }

      .base-info {
        //opacity: 0;
      }
    }

    .with-me {
      opacity: 0.5;
    }

    .more {
      opacity: 1;
    }
  }


}

.bigmask {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 39;
}

:deep(.withme-dialoag) {
  .el-dialog__header {
    padding: 0 !important;
  }
}


</style>
